<template>
    <div class="swiper">
            <div class="swiper-container swiper-top">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-d ">123</div>
                    <div class="swiper-slide swiper-d ">123</div>
                    <div class="swiper-slide swiper-d ">123</div>
                    <div class="swiper-slide swiper-d ">123</div>
                </div>
            </div>
            <div class="swiper-section"></div>
            <div class="swiper-bottom"></div>
        </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
};
</script>

<style scoped>

.swiper {
  width: 100%;
  height: 9rem;
  background: url("/static/images/_04.jpg") center,center;
  background-size: 9rem;
}
.swiper > .swiper-top {
  width: 100%;
  height: 42%;
  background: rgba(0, 0, 0, 0.5)
}
.swiper > .swiper-top .swiper-d {
  width: 33%;
  height: 100%;
}
.swiper > .swiper-section {
  width: 100%;
  height: 18%;


}
.swiper > .swiper-bottom {
  width: 100%;
  height: 40%;
  background: rgba(0, 0, 0, 0.5)


}
</style>
